<template>
    <div class="video-info">
        <video controls="controls" :src="item.video.url" v-if="item.video && item.video.url"></video>
        <div class="v-info">
            <div class="v-title">{{item.title}}</div>
            <div class="u-info" v-if="item.user && item.user.avatarurl && item.user.nickName">
                <img :src="item.user.avatarurl" />
                <span class="u-name">{{ item.user.nickName }}</span>
                <img v-show="item.user.identification==1" src="../assets/img/v-info-img/identification.png" class="u-icon">
            </div>
        </div>
    </div>
</template>

<script>
export default {
   data(){
       return{
           item:this.$route.query.data
       }
   },
}
</script>

<style lang="less" scoped>
.video-info{
    video{
        width: 100%;
    }

    .v-info{
        display: flex;
        flex-direction: column;
        padding: 14px 15px 15px;
        .v-title{
            font-size: 15px;
            color: #333;
            line-height: 22px;
        }
        .u-info{
            display: flex;
            justify-content: start;
            align-items: center;
            margin-top: 8px;
            img {
                width: 22px;
                border-radius: 50%;
            }
            .u-name {
                font-size: 14px;
                margin: 0px 4px 0px 8px;
            }
            .u-icon{
                width: 12px;
                height: 12px;
            }
        }
    }
}

</style>